layui.use(['table', 'HttpRequest', 'func', 'form', 'laydate', 'gunsSelect'], function () {
    var $ = layui.$;
    var HttpRequest = layui.HttpRequest;
    var request = new HttpRequest(Feng.ctxPath + "/works/list", 'get');
    var result = request.start();
    console.log(result.data);
    // 按 workDept 分组数据
    var groupedData = {};
    if (result && result.data) {
        result.data.forEach(function(item) {
            if (!groupedData[item.workDept]) {
                groupedData[item.workDept] = {
                    workDept: item.workDept,
                    workDeptName: item.workDeptName,
                    works: []
                };
            }
            groupedData[item.workDept].works.push(item);
        });
    }
    console.log('分组后的数据：', groupedData);

    // 渲染部门区域
    function renderDepartments() {
        var html = '';
        Object.values(groupedData).forEach(function(dept, index) {
            html += `
                <div class="part part_${index + 1}">
                    <div class="title">
                        <span>${dept.workDeptName}</span>
                    </div>
                    <ul class="list" id="dept-${dept.workDept}"></ul>
                </div>
            `;
        });
        $('#departments-container').html(html);

        // 为每个部门渲染作品列表
        Object.values(groupedData).forEach(function(dept) {
            renderList(dept.works, `#dept-${dept.workDept}`);
        });
    }


    let toDetail = function (workId) {
        var url = Feng.ctxPath + '/view/web/Details?workId=' + workId;
        window.open(url, '_blank');
    }
    let toVote = function (workId) {
        var url = Feng.ctxPath + '/view/web/vote';
        window.open(url, '_blank');
    }

    // 渲染列表函数
    function renderList(data, containerId) {
        var html = '';
        if (!data || data.length === 0) {
            html = `
                <li class="no-data" style="width: 100%; height: 200px; display: flex; justify-content: center; align-items: center;">
                    <div style="text-align: center; color: #999; font-size: 16px;">
                        <i class="layui-icon layui-icon-face-cry" style="font-size: 30px; margin-bottom: 10px; display: block;"></i>
                        暂无作品！
                    </div>
                </li>
            `;
        } else {
            data.forEach(function (item) {
                html += `
                <li>
                    <a class="detail-link" 
                       data-id="${item.workId}"
                       data-author="${item.workAuthor}"
                       data-video="${item.workVideoUrl}"
                       style="cursor:pointer">
                        <img id="pic_preview_box_id" 
                             src="${item.workImgUrl}" 
                             width="210" 
                             height="140" 
                             border="0/">
                        <span class="work_name">
                        ${item.workTitle}
                            <span class="vote_num">(${item.workAuthor})</span>
                        </span>
                    </a>
                </li>
                `;
            });
        }
        
        $(containerId).html(html);
        
        // 只在有数据时绑定点击事件
        if (data && data.length > 0) {
            $(`${containerId} .detail-link`).on('click', function() {
                var workId = $(this).data('id');
                toDetail(workId);
            });
        }
    }

    renderDepartments()


    $("#vote").on("click",function() {
        toVote()
    })


});